<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>overflow:hidden - Focus-Scrolling behavior</title>
</head>
<style>
  .both-container,
  .vertical-container,
  .horizontal-container {
    box-sizing: border-box;
    width: 300px;
    margin: 0;
    padding: 0;
    border: 2px dashed blue;
    overflow: hidden;
    white-space: nowrap;
  }

  .filler,
  .first,
  .second,
  .third,
  .fourth {
    display: inline-block;
    box-sizing: border-box;
    width: 300px;
    padding: 5px;
    margin: 0;
    border: 1px solid red;
  }

  .both-container,
  .vertical-container {
    height: 30px;
  }

  .vertical-container > div {
    height: 30px;
    display: block;
  }

  .both-container > div {
    height: 30px;
  }

  .first {
    background: #CCFFFF;
  }
  .second {
    background: #FFCCFF;
  }
  .third {
    background: #FFFFCC;
  }
  .fourth {
    background: #CCFFCC;
  }
  .filler {
    background: #EEE;
  }

  div:focus {
    background: #AAA;
  }
</style>
<body>

  <h1>Scrolling behavior of <code>overflow:hidden</code> upon <code>Focus</code></h1>


  <h2>Vertical Scrolling</h2>

  <p>more than required space</p>
  <div class="vertical-container" style="height: 50px">
    <div class="first" tabindex="0">first thing</div>
    <div class="second" tabindex="0">second thing</div>
    <div class="third" tabindex="0">third thing</div>
    <div class="fourth" tabindex="0">fourth thing</div>
  </div>

  <p>required space</p>
  <div class="vertical-container">
    <div class="first" tabindex="0">first thing</div>
    <div class="second" tabindex="0">second thing</div>
    <div class="third" tabindex="0">third thing</div>
    <div class="fourth" tabindex="0">fourth thing</div>
  </div>

  <p>less than required space</p>
  <div class="vertical-container" style="height: 20px">
    <div class="first" tabindex="0">first thing</div>
    <div class="second" tabindex="0">second thing</div>
    <div class="third" tabindex="0">third thing</div>
    <div class="fourth" tabindex="0">fourth thing</div>
  </div>


  <h2>Horizontal Scrolling</h2>

  <p>more than required space</p>
  <div class="horizontal-container" style="width: 400px">
    <div class="first" tabindex="0">first thing</div>
    <div class="second" tabindex="0">second thing</div>
    <div class="third" tabindex="0">third thing</div>
    <div class="fourth" tabindex="0">fourth thing</div>
  </div>

  <p>required space</p>
  <div class="horizontal-container">
    <div class="first" tabindex="0">first thing</div>
    <div class="second" tabindex="0">second thing</div>
    <div class="third" tabindex="0">third thing</div>
    <div class="fourth" tabindex="0">fourth thing</div>
  </div>

  <p>less than required space</p>
  <div class="horizontal-container" style="width: 200px">
    <div class="first" tabindex="0">first thing</div>
    <div class="second" tabindex="0">second thing</div>
    <div class="third" tabindex="0">third thing</div>
    <div class="fourth" tabindex="0">fourth thing</div>
  </div>


  <h2>Horizontal And Vertical Scrolling</h2>

  <p>more than required space</p>
  <div class="both-container" style="width: 400px; height: 40px">
    <div class="first" tabindex="0">first thing</div>
    <div class="filler" tabindex="0">filler thing</div>
    <br>
    <div class="filler" tabindex="0">filler thing</div>
    <div class="second" tabindex="0">second thing</div>
    <br>
    <div class="filler" tabindex="0">filler thing</div>
    <div class="third" tabindex="0">third thing</div>
    <br>
    <div class="filler" tabindex="0">filler thing</div>
    <div class="fourth" tabindex="0">fourth thing</div>
  </div>

  <p>required space</p>
  <div class="both-container">
    <div class="first" tabindex="0">first thing</div>
    <div class="filler" tabindex="0">filler thing</div>
    <br>
    <div class="filler" tabindex="0">filler thing</div>
    <div class="second" tabindex="0">second thing</div>
    <br>
    <div class="filler" tabindex="0">filler thing</div>
    <div class="third" tabindex="0">third thing</div>
    <br>
    <div class="filler" tabindex="0">filler thing</div>
    <div class="fourth" tabindex="0">fourth thing</div>
  </div>

  <p>less than required space</p>
  <div class="both-container" style="width: 200px; height: 20px">
    <div class="first" tabindex="0">first thing</div>
    <div class="filler" tabindex="0">filler thing</div>
    <br>
    <div class="filler" tabindex="0">filler thing</div>
    <div class="second" tabindex="0">second thing</div>
    <br>
    <div class="filler" tabindex="0">filler thing</div>
    <div class="third" tabindex="0">third thing</div>
    <br>
    <div class="filler" tabindex="0">filler thing</div>
    <div class="fourth" tabindex="0">fourth thing</div>
  </div>


  <script>
    [].forEach.call(document.getElementsByClassName('third'), function(element, index) {
      setTimeout(function() {
        element.focus();
      }, 1000 * index);
    });
  </script>

</body>
</html>
